import React, { PureComponent } from 'react';
import { Popover, Icon, Tabs, Badge, Spin } from 'antd';
import classNames from 'classnames';
import List from './NoticeList';
import styles from './index.less';

const { TabPane } = Tabs;

export default class NoticeIcon extends PureComponent {
  static defaultProps = {
      onItemClick: () => {},
      onPopupVisibleChange: () => {},
      onTabChange: () => {},
      onClear: () => {},
      loading: false,
      locale: {
          emptyText: '暂无数据',
          clear: '清空',
      },
      emptyImage: 'https://gw.alipayobjects.com/zos/rmsportal/wAhyIChODzsoKIOBHcBk.svg',
  };
  static Tab = TabPane;
  constructor(props) {
      super(props);
      this.state = {};
      if (props.children && props.children[0]) {
          this.state.tabType = props.children[0].props.title;
      }
  }
  onItemClick = (item, tabProps) => {
      const { onItemClick } = this.props;
      onItemClick(item, tabProps);
  };
  onTabChange = (tabType) => {
      this.setState({ tabType });
      this.props.onTabChange(tabType);
  };
  getNotificationBox() {
      const { children, loading, locale } = this.props;
      if (!children) {
          return null;
      }
      const panes = React.Children.map(children, (child) => {
          const title =
        child.props.list && child.props.list.length > 0
            ? `${child.props.title} (${child.props.list.length})`
            : child.props.title;
          return (
              <TabPane tab={title} key={child.props.title}>
                  <List
                      {...child.props}
                      data={child.props.list}
                      onClick={item => this.onItemClick(item, child.props)}
                      onClear={() => this.props.onClear(child.props.title)}
                      title={child.props.title}
                      locale={locale}
                  />
              </TabPane>
          );
      });
      return (
          <Spin spinning={loading} delay={0}>
              <Tabs className={styles.tabs} onChange={this.onTabChange}>
                  {panes}
              </Tabs>
          </Spin>
      );
  }
  render() {
      const { className, count, popupAlign, onPopupVisibleChange } = this.props;
      const noticeButtonClass = classNames(className, styles.noticeButton);
      const notificationBox = this.getNotificationBox();
      const trigger = (
          <span className={noticeButtonClass}>
              <Badge count={count} className={styles.badge}>
                  <Icon type="bell" className={styles.icon} />
              </Badge>
          </span>
      );
      if (!notificationBox) {
          return trigger;
      }
      const popoverProps = {};
      if ('popupVisible' in this.props) {
          popoverProps.visible = this.props.popupVisible;
      }
      return (
          <Popover
              placement="bottomRight"
              content={notificationBox}
              popupClassName={styles.popover}
              trigger="click"
              arrowPointAtCenter
              popupAlign={popupAlign}
              onVisibleChange={onPopupVisibleChange}
              {...popoverProps}
          >
              {trigger}
          </Popover>
      );
  }
}
